<template>
    <div class="repairsever_main">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="customerservice_title">维修工单</h1>
                <span class="" style="margin-left: 10px">/ 维修服务的管理和维修工单的记录</span>
            </el-col>
        </el-row >

        <el-row class="nav" style=" border-radius: 4px">
            <el-col>
                <router-link to="/newrepairseverpage"><div class="nav-item" ><i class="iconfont icon-qianbi"></i> 新增</div></router-link>
                <router-link to="/weiStateManager"><div class="nav-item" ><i class="iconfont icon-m-weixinwenzhang"></i> 类型管理</div></router-link>
                <div class="nav-item2">
                    <download-excel :data="workords" :fields="excelFields" name="维修服务记录表.xls" type="xls">
                        <el-button type="text">
                            <i class="iconfont icon-excel"></i>Excel导出
                        </el-button>
                    </download-excel>
                </div>

                <el-form style="display:inline-block">
                    <div class="nav-item" style="border:none">
                        <el-input v-model="searchParam" clearable placeholder="请输入内容"></el-input>
                    </div>
                    <div style="display:inline-block">
                        <el-button  @click="searchK">搜索</el-button>
                    </div>
                </el-form>

            </el-col>
        </el-row>
<!--数据内容-->
        <div class="content" style=" border-radius: 4px">

            <el-tabs style="margin-bottom: 0px;height: 38px;border-radius: 5px" type="border-card" @tab-click="changeTab">
                <el-tab-pane label="全部" name="all"></el-tab-pane>

                <template v-for="types in weiStateList">
                    <el-tab-pane :label="types.weiName" ></el-tab-pane>
                </template>

            </el-tabs>

            <el-table :data="workords" style="width: 100%;min-height: 310px;margin: 0px" border>

                <el-table-column prop="workordId" type="selection" style="width: 5%" header-align="center" align="center" ></el-table-column>

                <el-table-column label="工单流水号" style="width: 5%" header-align="center" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.workordId }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="对应客户" style="width: 15%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.customer.customerName}}
                    </template>
                </el-table-column>

                <el-table-column label="发起时间" style="width: 15%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.takeTime | format_date}}
                    </template>
                </el-table-column>

                <el-table-column label="维修申请人" style="width: 5%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.emp.empName}}
                    </template>
                </el-table-column>

                <el-table-column label="客户联系人" style="width: 5%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.linkMan.contactName}}
                    </template>
                </el-table-column>

                <el-table-column label="联系方式" style="width: 15%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.linkWay}}
                    </template>
                </el-table-column>

                <el-table-column label="状态" style="width: 15%" header-align="center" align="center">
                    <template slot-scope="scope">
                        {{scope.row.weiState}}
                    </template>
                </el-table-column>

                <el-table-column label="管理" style="width: 15%" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="go_detail(scope.row)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deteleOne(scope.row)"></el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!--    分页-->
            <div class="pagePlug">
                <div class="block" style="margin-top:10px">
                    <el-pagination background layout="total, prev, pager, next"
                                   :total="totalSize"
                                   :page-size="pageSize"
                                   @current-change="changePage" >
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "RepairSever",
        data: function() {
            return {
                loading:true,
                searchParam:'',//搜索框内容
                kcName:'',//表头名字
                pageSize:5,//分页页大小
                currPage:1,//当前页码，默认为1
                totalSize:0,//总记录数
                dialogFormVisible:false,
                workords:[],
                linkType:'',
                workord:{
                    workordId:0,
                    workTest:'',
                    takeTime:'',
                    linkWay:'',
                    linkMan:{},
                    weiState:'',
                    emp:{
                        empId:0
                    },
                    customer:{
                        customerId:0
                    },
                    check:0
                },
                detailData:{},
                weiStateList:{},
                //Excel导出对应关系
                excelFields: {
                    "工单编号": "workordId",
                    "对应客户": "customer.customerName",		//支持嵌套属性
                    "维修内容": "workTest",
                    "联系人": "linkMan.contactName",
                    "联系方式": "linkWay",
                    "发起时间": "takeTime",
                    "发起人": "emp.empName",
                    "工单进程":"weiState",
                    "审批状态": {
                        field: "check",
                        callback: value => {
                            if(value==0){
                                return "未审批"
                            }else{
                                return "审批通过"
                            }
                        }
                    }
                }
            };
        },
        methods: {
            go_detail(row){
                //console.log(row)
                this.detailData=row;
                sessionStorage.setItem("repairServe", JSON.stringify(this.detailData));
                this.$router.push({path:"/repairserve_detail"});
            },
            initData(currPage,pageSize,search,kcName){
                this.loading=true;
                this.$axios.get("api/after-sale/workord/workord-list",{params:{page:currPage,size:pageSize,search:search,kcName:kcName}})
                    .then(v=>{
                        this.workords = v.data.rows;
                        this.totalSize = v.data.total;
                        this.loading = false;
                    }).catch();
            },
            initState(){
                this.$axios.get("api/after-sale/workord/weiStateList").then(v=>{
                    this.weiStateList = v.data;
                }).catch();
            },
            searchK(){
                this.initData(1,this.pageSize,this.searchParam,this.kcName);
            },
            changeTab(tab){
                var KCname = tab.label;
                if (KCname=='全部'){
                    KCname ='';
                }
                this.kcName = KCname;
                this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            },
            changePage(val){
                //val就是当前页码
                this.initData(val,this.pageSize,this.searchParam,this.kcName);
            },
            deteleOne(w){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("api/after-sale/workord/delete-workord",this.qs.stringify({wId:w.workordId}))
                        .then(v=>{
                            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
                        }).catch();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        created() {
            this.initData(this.currPage,this.pageSize,this.searchParam,this.kcName);
            this.initState();
        }
    };
</script>

<style scoped>

    *{margin: 0;padding: 0;font-size: 14px;}

    /*标题部分*/
    .repairsever_main{background: #e4e7ee}
    .head{height:70px;background: #fcfbfd;line-height: 70px}
    .customerservice_title{display: inline-block;font-weight: unset;margin-left: 20px;font-size: 25px;}
    .el-col span{color: #b4b4bc}
    /*内容部分*/
    .nav{margin: 20px;background: #fcfbfd;width: 100%-40px;height: 55px;line-height: 55px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    .nav-item{color: rgb(51,51,51);display: inline-block;height:25px;padding: 0px 15px;border-right: 1px solid #dcdfe6;line-height: 25px;cursor: pointer}
    .nav-item2{color: rgb(51,51,51);display: inline-block;height:25px;padding: 0px 15px;line-height: 25px;cursor: pointer}
    /*数据*/
    .content{min-height:350px;margin: 20px;background: #fcfbfd;width: 100%-40px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)}
    /*分页*/
    .pagePlug{
        height: 50px;
        padding-top: 20px;
    }
    .ncsText .el-form-item{width: 100%;margin-bottom: 22px !important;}
</style>